<template>
  <q-header elevated>
    <div class="g-head">
      <div ref="headerNav" class="ydsz_nav">
        <div class="row items-center justify-between">
          <router-link to="/">
            <img src="@/assets/images/logo.png" />
          </router-link>
          <div class="row">
            <HeaderNavItem :nav-list="navList" />
          </div>
          <div>
            <q-btn flat round dense icon="search" class="q-mr-xs" />
            <q-btn flat round dense icon="perm_identity" />
          </div>
        </div>
      </div>
    </div>
    <HeaderBanner :banner-list="bannerList" />
  </q-header>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useHomeStore } from '@/stores/home'
import { ImgData, NavData } from '@/constants/constantType'

const { getBanner, getNav } = useHomeStore()
const scrollHeight = ref<number>(200)
const headerNav = ref<object | null>(null)
const bannerList = ref<ImgData[]>([])
const navList = ref<NavData[]>([])

window.addEventListener('scroll', () => {
  if (!headerNav.value) return
  if (window.scrollY > scrollHeight.value) {
    headerNav.value.style.backgroundColor = 'black'
  } else {
    headerNav.value.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'
  }
})
onMounted(async () => {
  bannerList.value = await getBanner()
  navList.value = await getNav()
})
</script>

<style lang="scss" scoped>
.q-layout__section--marginal {
  background-color: transparent;
}
</style>
